<template>
    <van-nav-bar :title="title" left-arrow @click-left="handleLeft">
    </van-nav-bar>
    <div class="detailList">
        <div class="detailList_header">
            <div class="detailList_header_left">{{ describe }}</div>
            <div class="detailList_header_right colors">{{ total }}次</div>
        </div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                <template v-slot:finished>
                    <div class="nothing_div" v-if="list.length == 0 && !refreshing">
                        <van-image :src="nothingData"></van-image>
                        <div class="nothing_font">暂无数据</div>
                    </div>
                </template>
                <warehousing :list="list" v-if="title == '入库记录'"></warehousing>
                <outbound :list="list" v-if="title == '出库记录'"></outbound>
                <inventory :list="list" v-if="title == '盘点记录'"></inventory>
                <allocateTransfer :list="list" v-if="title == '调拨记录'"></allocateTransfer>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<script setup lang="ts">
import { computed, ref } from "vue";
import { selectOutStockAppListByTime, queryCountDetailByProduct, selectAllotListByTime, getStorageRecordByTime, selectOutListByTimeCount } from '@/api/productHome/index'
import { useRoute, useRouter } from "vue-router";
import warehousing from './components/recordList/warehousing.vue'
import outbound from './components/recordList/outbound.vue'
import inventory from './components/recordList/inventory.vue'
import allocateTransfer from './components/recordList/allocateTransfer.vue'
const nothingData = new URL("@/assets/porduct/icon_zanwushuju.png", import.meta.url).href
const route = useRoute();
const router = useRouter();

const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
});
const total = ref()

/** 路由名称title */
const title: any = computed(() => {
    return route.query.title;
});
/** 商品id */
const productId: any = computed(() => {
    return route.query.id;
});
/** 描述 */
const describe: any = computed(() => {
    switch (title.value) {
        case '入库记录':
            return '近30天内入库'
        case '出库记录':
            return '近30天内超期'
        case '盘点记录':
            return '近30天内盘点'
        case '调拨记录':
            return '近30天内调拨'
        default:
            break;
    }
})

// 列表
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const list = ref<any[]>([]);
// 限制连续刷新数据重复问题
const refreFlag = ref(true)

/** 查询商品列表 */
const getList = async () => {
    var res: any;
    if (title.value == '盘点记录') {
        res = await queryCountDetailByProduct({ ...queryParams.value, productId: productId.value });
        total.value = res.total
    } else if (title.value == '调拨记录') {
        res = await selectAllotListByTime({ ...queryParams.value, productsId: productId.value })
        total.value = res.total
    } else if (title.value == '入库记录') {
        res = await getStorageRecordByTime({ ...queryParams.value, productsId: productId.value })
        total.value = res.total
    } else if (title.value == '出库记录') {
        res = await selectOutStockAppListByTime({ ...queryParams.value, productsId: productId.value })
        const totals = await selectOutListByTimeCount(productId.value)
        total.value = totals.data.overdueQuantity
    }
    refreFlag.value = true
    // 空数据 停止加载
    if (res.rows.length == 0) {
        list.value = [];
        finished.value = true;
        return;
    }
    // 有数据 赋值列表 加载状态结束
    res.rows.forEach((item) => {
        finished.value = false;
        list.value.push(item);
    });
    loading.value = false;
    refreshing.value = false;
    // 如果list长度大于等于总数据条数，数据全部加载完成
    if (list.value.length >= res.total) {
        finished.value = true; //结束加载
    }
};
/** 加载更多 */
const onLoad = async () => {
    getList();
    queryParams.value.pageNum++;
};
/** 下拉 */
const onRefresh = () => {
    if (refreFlag.value) {
        refreFlag.value = false
        finished.value = false; // 清空列表数据
        refreshing.value = false;
        loading.value = true; // 加载状态
        queryParams.value.pageNum = 1; // 分页数赋值为1
        list.value = []; // 清空数组
        onLoad(); // 重新加载数据
    } else {
        finished.value = false;
        refreshing.value = false;
    }
};

/** 回退 */
const handleLeft = () => {
    router.back();
}
</script>
<style scoped lang="less">
:deep(.van-icon-arrow-left) {
    color: #1A1B1C;
}

.detailList {
    width: 100%;
    height: calc(100vh - 90px);
    background-color: #f6faff;
    box-sizing: border-box;

    .colors {
        color: #0094FF !important;
    }

    .detailList_header {
        width: 100%;
        height: 40px;
        padding: 0 15px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .nothing_div {
        width: 100%;
        margin: auto;
        text-align: center;
        margin-top: 20vh;
        font-weight: 400;
        font-size: 12px;
        color: #B8BECA;
        line-height: 12px;
        flex-wrap: wrap;

        .van-image {
            width: 160px;
            height: 160px;
        }
    }

    :deep(.van-pull-refresh) {
        height: calc(100vh - 130px);
        overflow: scroll;
    }
}
</style>